<template>
<div>
      <!-- 卡片视图 -->
    <el-card class="box-card">
      <div class="studiv">
        <div>
            <span>班级：</span>
            <el-select v-model="value1">
                <el-option v-for="item in options1" :key="item.value" :label="item.class" :value="item.value"></el-option>
            </el-select>
            <span style="margin-left:10px">年级：</span>
            <el-select v-model="value2" collapse-tags >
                <el-option v-for="item in options2" :key="item.value" :label="item.grade" :value="item.value"></el-option>
            </el-select>
            <el-button class="query" slot="append" icon="el-icon-search" @click="handleQuery" type="primary">查 询</el-button>
        </div>
        <div class="addbtu">
            <el-button class="el-icon-plus" @click="handleAdd()" type="success" >增 加</el-button>
        </div>
        </div>
    </el-card>
    <!-- 学生信息列表 -->
    <el-card>
        <el-table :data="tbData" border style="width: 100%">
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column fixed label="序号" align="center">
                <template slot-scope="scope">{{scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="学号" align="center" property="studentNum"></el-table-column>
            <el-table-column label="姓名" align="center" property="studentName"></el-table-column>
            <el-table-column label="性别" align="center" property="sex"></el-table-column>
            <el-table-column label="身份证" align="center" property="IDnumber"></el-table-column>
            <el-table-column label="家庭住址" align="center" property="address">
            </el-table-column>
            <el-table-column label="手机号" align="center" property="Phone"></el-table-column>
            <el-table-column label="微信号" align="center" property="weChat"></el-table-column>
            <el-table-column label="学院" align="center" property="college"></el-table-column>
            <el-table-column label="年级" align="center" property="grade"></el-table-column>
            <el-table-column label="班级" align="center" property="class"></el-table-column>
            <el-table-column label="操作"  align="center" fixed="right"  width="150">
            <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
  </el-table>
    <!-- 模态框 -->
      <div>
        <el-dialog title="新增学生" :visible.sync="dialogFormVisible" >
          <el-form :model="form" :rules="rules" ref="formDemo" label-width="100px" class="stufrom">
            <el-form-item label="学号:" prop="studentNum">
              <el-input v-model="form.studentNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名:" prop="studentName">
               <el-input v-model="form.studentName" controls-position="right"></el-input>
            </el-form-item>
            <el-form-item label="性别:" prop="sex">
              <el-radio v-model="form.sex" :label="1">男</el-radio>
              <el-radio v-model="form.sex" :label="2">女</el-radio>
            </el-form-item>
            <el-form-item label="身份证:" prop="IDnumber">
              <el-input v-model="form.IDnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="家庭住址:" prop="address">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="手机号:" prop="Phone">
               <el-input v-model="form.Phone" controls-position="right"></el-input>
            </el-form-item>
            <el-form-item label="微信号:"  prop="weChat">
              <el-input v-model="form.weChat" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级:"  prop="class">
              <el-input v-model="form.class" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年级:" prop="grade">
              <el-input v-model="form.grade" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="block">
        <el-pagination
            :current-page="pager.pageIndex"
            :page-size="pager.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pager.rowsTotal"
            background
        >
        </el-pagination>
        </div>
  </el-card>
  </div>
</template>

<script>
// import axios from "axios";
import {GetStudentList} from "@/api/studentapi"

export default {
  data() {
     // 1. 验证手机号的验证规则
    var checkMobile = (rule, value, callback) => {
      // 前两位以13、15、18、17开头 后八位0-9
      const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("手机号不正确"));
      }
    };
    // 2. 验证身份证号的验证规则
    var checkIdCard = (rule, value, callback) => {
    //  1-8{2} 身份证前两位代表省直辖市自治区没有0和9
      const reg = /^[1-8]{2}[0-9]{4}[0-9]{4}((0[1-9]{1})|(1[0-2]{1}))((0[1-9]{1})|(1[0-9]{1})|(2[0-9]{1})|(3[0-1]{1}))[0-9]{3}[0-9xX]{1}$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("身份证号不正确"));
      }
    };
    // 3. 验证学号的验证规则
    var checkstudentNum = (rule, value, callback) => {
      // 学号1 或2开头，最后两位为01-59的数
      const reg = /^[1-2]([0-9]{7})([0][1-9]|[1-5][0-9])$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("学号不正确"));
      }
    };
    // 4. 验证微信号的验证规则
    var checkWeChat = (rule, value, callback) => {
      // 支持6-20个字母、数字、下划线或减号，以字母开头
      const reg = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("微信号不正确"));
      }
    };
    return {
        pager:{
        pageIndex:1,  //当前页面
        pageSize:6,   //每页展示列表数
        rowsTotal:20  // 列表总数
      },
       // 班级和年级选择框
       options1: [
        { value: '选项1', class: '1班'}, 
        { value: '选项2', class: '2班'}, 
        { value: '选项3', class: '3班'},  
        { value: '选项4', class: '4班'}, ],
        options2: [
        { value: '选项1', grade: '2019'}, 
        { value: '选项2', grade: '2020'}, 
        { value: '选项3', grade: '2021'},  
        { value: '选项4', grade: '2022'}, ],
        value1: [],
        value2: [],
        // 表单验证规则
        rules:{
        studentName:[
            { required: true, trigger: "blur",  message: "请输入姓名"},
        ],
        studentNum:[
            { required: true, trigger: "blur", message: "请输入学号"},
            { validator:checkstudentNum, trigger:"blur"}
        ],
        Phone:[
            { required: true, trigger: "blur", message: "请输入手机号"},
            { validator:checkMobile, trigger:"blur"}
        ],
        IDnumber:[
            { required:true, trigger:"blur", message:'请输入身份证号'},
            { validator:checkIdCard, trigger:"blur"}
        ],
        weChat:[
            { required: true, trigger: "blur", message: "请输入微信号"},
            { validator:checkWeChat, trigger:"blur"}
        ]
      },
        keyword:"",
        loading: false,
        tbData: [],
        dialogFormVisible: false,
        form: {},
    };
  },
  mounted(){
    this.getList();
  },
  methods: {
       getList(){
          GetStudentList().then((res)=>{
            console.log(res.data);
            res.data.forEach(item => {
              var obj = {
                studentNum : item.studentInfo.studentId,
                studentName : item.studentInfo.studentName,
                sex:item.studentInfo.sex,
                IDnumber:item.studentInfo.idNumber,
                address:item.studentInfo.address,
                Phone:item.studentInfo.phoneNumber,
                weChat:item.studentInfo.weChat,
                class:item.classInfo.className,

              }
              this.tbData.push(obj);
            });
            
          })
      },
    // 搜索
    handleQuery(){
          if(this.keyword == ""){
            this.$message.warning("查询条件不能为空");
            this.keyword = "";
            return
          }
          console.log("你输入的查询条件:"+this.keyword);
        },
    //  刷新
     handleRefresh(){},
    //  新增
     handleAdd() {
        this.dialogFormVisible = true;
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;
    },
    // 删除学生
    handleDelete(index, row) {},
    // 取消
    handleCancel(){
        this.dialogFormVisible =false
    },
    // 保存
    handleSave(){},
  },
};
</script>
<style>
.studiv{
  display: flex;
  float: left;
}
.addbtu{
  margin-left: 10px;
}
.query{
  margin-left: 10px;
}
.box-card{
  height: 80px;
   margin-bottom: 1px;
}
.block{
 margin-top: 30px;
  margin-bottom: 10px;
}
.stufrom > .el-form-item > .el-form-item__label {
  font-weight: bolder !important;
  font-size: 18px;
}
</style> 